﻿@{
    ViewBag.Title = "组键增强版本";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Head{
    <link rel="stylesheet" href="@Url.Content("~/Content/sco/css/scojs.css")">
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.ajax.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.collapse.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.confirm.js")" charset="gb2312"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.countdown.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.message.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.modal.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.panes.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.tab.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.tooltip.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/sco/js/sco.valid.js")"></script>
}
<div class="container">
    <h2>
        <a href="http://www.bootcss.com/p/sco.js/" target="_blank">链接过去</a></h2>
    <div class="row">
        <div class="span12">
            <a data-trigger="modal" href="ajaxhtml1" data-title="Modal title" class="btn">遮罩层打开页面</a>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="span12">
            <a data-trigger="confirm" href="/delete/me" class="btn" data-content="你确定删除该记录">确认对话框</a>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="span12">
            <a data-trigger="ajax" href="ajaxhtml2" data-target="#ajax_target" class="btn btn-primary btn-large  ">
                在下面框框中打开</a>
            <div id="ajax_target" class="textboder">
                n</div>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="span12">
            <div class="bs-docs-example" style="padding-bottom: 24px;">
                <ul class="nav nav-tabs" id="mytabs" >
                    <li><a href="#tab1">Tab 1</a></li>
                    <li><a href="#tab2">Tab 2</a></li>
                    <li><a href="#tab3">Tab 3</a></li>
                    <li><a href="#modals">Tab with existing ID on page</a></li>
                </ul>
                <div class="pane-wrapper slide">
                    <div>
                        Tab 1 content</div>
                    <div>
                        Tab 2 content</div>
                    <div>
                        Tab 3 content</div>
                    <div>
                        Tab 4 content</div>
                </div>
            </div>
                 <script type="text/javascript">
                     $(function () {
                         var $tab = $.scojs_tab('#mytabs', { mode: "next", easing: "flip" });
                         $tab.select(2);
                     });
            </script>

        </div>

    </div>
    <hr />
    <div class="row">
        <div class="span12">
            <a href="#" data-trigger="tooltip" data-content="Lorem ipsum dolor">Hover me</a>
            <div>
                <a href="#" data-trigger="tooltip" data-autoclose="0" data-content-elem="#tooltip_target1">
                    See the wonder</a>
                <div id="tooltip_target1" class="hide">
                    This is such an important message that you need to click to close
                    <button class="button" data-dismiss="tooltip">
                        close</button></div>
            </div>
        </div>
    </div>
    <hr />
    <div class="row">
        <div class="span12">
            <div class="pane-wrapper" id="panes-example">
                <div>
                    <h2>
                        哟 你妹</h2>
                    <img src="/Content/img/bootstrap-slide-01.jpg">
                </div>
                <div>
                    <img src="/Content/img/bootstrap-slide-02.jpg"></div>
                <div>
                    <img src="/Content/img/bootstrap-slide-03.jpg"></div>
            </div>
            <button class="btn" id="select-pane1">
                Show 1</button>
            <button class="btn" id="select-pane2">
                Show 2</button>
            <script type="text/javascript">
                $(function () {
                    var $panes = $.scojs_panes('#panes-example', {
                        integer: 3,
                        easing: 'xfade', //xfade, slide , flip
                        onBeforeSelect: function () {
                            setTimeout(function () {
                                $panes.next();
                            }, 3000);
                        }
                    });
                    $panes.next();
                    $('#select-pane1').on('click', function () {
                        $panes.select(0);
                    });
                    $('#select-pane2').on('click', function () {
                        $panes.select(1);
                    });
                });
            </script>
        </div>
    </div>
</div>
